<template>
	<view class="wrap">
		<view>
			<SlideImage :images="goods_images" />
		</view>

		<view class="goods_wrap">
			<view class="goods_style goods_msg">
				<view class="price">
					<view class="b_price">
						<text class="sub">￥</text><text>{{ goods_details.goods_price }}</text>
					</view>
					<view class="s_price">
						<text>￥{{ goods_details.line_price }}</text>
					</view>

					<view class="sales">
						<view class="sales_num">
							销量 : {{ goods_details.sales }}
						</view>
						<view class="share">

						</view>
					</view>
				</view>

				<view class="goods_title" @click="getPoster">
					<view class="title">
						{{ goods_details.goods_name }}
					</view>
					<view class="mark">
						{{ goods_details.selling_point }}
					</view>
				</view>

			</view>

			<view class="goods_style goods_t">
				<view>
					<Sku :sku="sku" :images="goods_images" @async_price="async_price" :sku_show="sku_show"
						@asyncSku="asyncSku" />
				</view>

				<view v-if="coupons.length">
					<Coupon :coupons="coupons" @callback_coupon="callback_coupon" />
				</view>

				<view v-if="service.length">
					<Service :service="service" />
				</view>

			</view>

			<view class="goods_style" v-if="comment.length">
				<view class="comment_box">
					<view class="comment_text">
						<text class="title">商品评价</text>
						<view class="more" @click.stop="toComment">查看更多 <text
								class="j_fr iconfont icon-xiayiyeqianjinchakangengduo"></text></view>
					</view>
					<view class="u-page" v-for="(item, index) in comment" :key="index">
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<view class="album">
									<image :src="item.avatarurl" style="width: 30px;height: 30px;border-radius:100%">
									</image>
									<view class="album__content">
										<view class="user">
											<view class="fl">
												<u--text
													:text="item.user_nickname ? item.user_nickname : item.nick_name"
													size="14" color="#666"></u--text>
											</view>
											<view class="time">{{ item.created_date }}</view>
										</view>
										<view class="star">
											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 30"
												:count="count" v-model="value[0]" readonly></up-rate>
											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 20"
												:count="count" v-model="value[1]" readonly></up-rate>
											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 10"
												:count="count" v-model="value[2]" readonly></up-rate>

										</view>
										<view class="spec">
											<u--text size="12" color="#ccc" :text="'规格：' + item.spec"></u--text>
										</view>
										<view class="content">{{ item.content }}</view>
										<view class="images" v-if="item.comment_images.length">
											<u-album :urls="item.comment_images"></u-album>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods_style">
				<u-parse :content="goods_details.content" class="goods_cent"></u-parse>
			</view>
			<view class="h_200"></view>
		</view>
		
		<view class="goods_fix">
			<view class="fl">

				<view class="item">
					<button class="btn_contact" open-type="contact"></button>
					<text class="iconfont icon-zaixiankefu"></text>
					<text class="b_text">客服</text>
				</view>

				<view class="item" @click="toCate">
					<text class="iconfont icon-gouwuche"></text>
					<text class="b_text">购物车</text>
				</view>
			</view>

			<view class="fr">
				<button class="btn add_cart" @click="handleSkuShow">加入购物车</button>
				<button class="btn buy_now" @click="handleSkuShow">立即购买</button>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "../../utils/commom.js"
	import {
		goods_detail
	} from "@/api/goods.js"
	
	const count = ref(5);
	const value = ref([1, 3, 5]);

	import SlideImage from './components/slideImage.vue';
	import Service from './components/service.vue';
	import Sku from './components/sku.vue';
	import Coupon from './components/coupon.vue';

	const goods_id = ref(null);
	const goods_details = ref({}); // 商品内容
	const goods_images = ref([]); // 商品图
	const service = ref([]); // 商品服务
	const coupons = ref([]); // 可领优惠券
	const comment = ref([]); // 商品评价
	const sku = ref({}); // SKU规格数据	
	const sku_show = ref(false);

	onLoad((option) => {
		goods_id.value = option.goods_id
	})

	onShow(() => {
		get_goods_detail(goods_id.value);
	})

	// 商品详情
	function get_goods_detail(goods_id) {
		goods_detail(goods_id).then(res => {
			let data = res.data
			goods_details.value = data.goods_detail;
			goods_images.value = data.goods_detail.goods_images;
			service.value = data.goods_service;
			coupons.value = data.coupon;
			comment.value = data.goods_comment;
			sku.value = data.sepc;
		})
	}

	// 回调商品详情选中的规格商品
	function async_price(data) {
		goods_details.value.goods_price = data.goods_price;
		goods_details.value.line_price = data.line_price;
	}

	// 优惠券领取后刷新
	function callback_coupon(data) {
		data && get_goods_detail(goods_id.value)
	}

	function handleSkuShow() {
		sku_show.value = true
	}

	function asyncSku(data) {
		sku_show.value = data
	}

	// 查看评价列表
	function toComment() {
		uni.navigateTo({
			url: `/pages/comment/index?goods_id=${goods_id.value}`
		});
	}

	// 购物车跳转
	function toCate() {
		uni.switchTab({
			url: '/pages/cart/index'
		})
	}

	// 分享到聊天
	onShareAppMessage(() => {
		return {
			title: `${ goods_details.value.goods_name }`,
			imageUrl: `${ goods_detail.value.goods_images[0] }`,
			path: `/pages/goods/detail?goods_id=${ goods_id.value }`
		}
	})

	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: `${ goods_details.value.goods_name }`,
			path: `/pages/goods/detail?goods_id=${ goods_id.value }`,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			}
		}
	})

</script>

<style lang="scss" scoped>
	@import "@/static/css/goods_detail.scss";
</style>